<template>
	<view class="home-container safe-area-bottom">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<!-- 左侧logo -->
			<view class="nav-left">
				<image src="/static/logo.png" class="logo-image" mode="heightFix" />
			</view>

			<!-- 右侧固定菜单图标 -->
            <view class="nav-right">
                <image id="home-menu-btn" src="/static/menu.png" class="menu-image" @click="toggleMenu" />
            </view>
		</view>

		<!-- 搜索框 -->
			<view class="search-container">
				<view class="search-box">
					<image src="/static/search.png" class="search-image" />
					<input class="search-input" placeholder="Value" />
				</view>
			</view>

		<!-- 卡片列表（跟随整页滚动） -->
		<view class="card-list">
			<view class="card" v-for="(item, index) in cardList" :key="index" @click="goDetail(item)">
				<view class="card-content">
			<view class="card-left">
						<text class="card-title">{{ item.title }}</text>
						<view class="card-details">
							<text class="detail-item">{{ item.category }}</text>
							<text class="detail-item">MOQ: {{ item.moq }}</text>
							<text class="detail-item">Lead time: {{ item.leadTime }}</text>
						<view class="location">
							<image src="/static/position.png" class="location-img" />
							<text class="location-text">{{ item.location }}</text>
						</view>
						</view>
					<view class="card-actions">
						<image src="/static/share.png" class="action-image" />
						<image src="/static/bookmark.png" class="action-image" />
						<image src="/static/mail.png" class="action-image" />
					</view>
					</view>
					<view class="card-right">
						<image :src="item.image" class="card-image" mode="aspectFit" />
						<view class="rating-container">
							<view class="rating-bar">
								<view class="rating-item grade-a">A</view>
								<view class="rating-item grade-b" :class="{ 'highlight-b': index === 0 || index === 2 }">B</view>
								<view class="rating-item grade-c" :class="{ 'highlight-c': index === 1 }">C</view>
								<view class="rating-item grade-d">D</view>
								<view class="rating-item grade-e">E</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 菜单弹出层：复用组件，并与菜单图标右下角对齐 -->
        <AccountMenu
            v-if="showMenu"
            :style="{ '--anchor-top': menuAnchor.top + 'px', '--anchor-right': '0px' }"
            @close="closeMenu"
            @select="handleMenuAction"
        />

		<CustomTabbar active="home" />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const showMenu = ref(false);
const menuAnchor = ref({ top: 70, right: 0 });

// 卡片数据
const cardList = ref([
	{
		title: 'Greenwear',
		category: 'Premium/Luxury',
		moq: '100 pcs / style',
		leadTime: '1-2 weeks',
		location: 'Portugal',
		image: '/static/p1.png',
		stars: 1
	},
	{
		title: 'PCLD factory',
		category: 'Premium',
		moq: '50 pcs / style',
		leadTime: '1-2 weeks',
		location: 'Italy',
		image: '/static/p2.png',
		stars: 2
	},
	{
		title: 'ALC factory',
		category: 'Premium/Mid-market',
		moq: '200 pcs / style',
		leadTime: '3-4 weeks',
		location: 'China',
		image: '/static/p3.png',
		stars: 2
	}
]);

const toggleMenu = () => {
    // 计算菜单按钮的位置，使弹窗贴齐容器右缘，顶部对齐按钮底部
    try {
        const query = uni.createSelectorQuery();
        query.select('#home-menu-btn').boundingClientRect((rect) => {
            if (rect && typeof rect.bottom === 'number') {
                menuAnchor.value = { top: rect.bottom + 4, right: 0 };
            } else {
                menuAnchor.value = { top: 70, right: 0 };
            }
            showMenu.value = !showMenu.value;
        }).exec();
    } catch (e) {
        menuAnchor.value = { top: 70, right: 0 };
        showMenu.value = !showMenu.value;
    }
};

const closeMenu = () => {
	showMenu.value = false;
};

const handleMenuAction = (action) => {
	closeMenu();
	switch (action) {
		case 'profile':
			uni.navigateTo({ url: '/pages/person/person' });
			break;
		case 'settings':
			uni.showToast({ title: 'Setting function under development', icon: 'none' });
			break;
		case 'logout':
			uni.navigateTo({ url: '/pages/login/login' });
			break;
	}
};

const goDetail = (item) => {
    uni.navigateTo({ url: '/pages/home/home-detail' });
};
</script>

<style lang="scss">
.home-container {
    min-height: 100vh;
    background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
    display: flex;
    flex-direction: column;
}

/* 顶部导航栏样式 */
.nav-bar {
	height: 60px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	position: relative;
	z-index: 100;
}

.nav-left {
	display: flex;
	align-items: center;
}

.logo-image {
	height: 80px;
	width: auto;
	margin-top: 16px;
	margin-left: -4px;
}



.nav-right { position: absolute; top: 20px; right: 20px; z-index: 1000; }

/* PC宽屏时，导航容器跟随居中区域，右上角菜单锚点也在容器内 */
@media (min-width: 768px) {
	.nav-bar { position: relative; }
	.home-container { position: relative; }
}

.menu-image {
	width: 36px;
	height: 36px;
}

/* 搜索框样式 */
.search-container {
	padding: 20px;
	z-index: 10;
}

.search-box {
	background-color: #fff;
	border-radius: 25px;
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-image {
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

.search-input {
	flex: 1;
	font-size: 16px;
	color: #333;
	border: none;
	outline: none;
}

.search-input::placeholder {
	color: #999;
}

/* 卡片列表样式 */
.card-list {
	padding: 0;
	padding-bottom: 20px;
}

.card {
	background-color: #fff;
	border-radius: 15px;
	margin: 0 16px 16px 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	min-height: 160px;
}

.card-content {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 12px;
	padding: 16px;
}

.card-left {
	flex: 1 1 auto;
}

.card-title {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	margin-bottom: 10px;
	display: block;
}

.card-details {
	margin-bottom: 15px;
}

.detail-item {
	display: block;
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}

.location {
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.location-icon {
	font-size: 12px;
	margin-right: 5px;
}

.location-text {
	font-size: 14px;
	color: #666;
}

.location-img {
	width: 14px;
	height: 14px;
	margin-right: 6px;
}

.card-actions {
	display: flex;
	gap: 12px;
}

.action-image {
	width: 18px;
	height: 18px;
}

.card-right {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.card-image {
	width: 152px;
	height: 100%;
	border-radius: 10px;
	object-fit: contain;
}

.rating-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rating-bar {
	display: flex;
	flex-direction: column;
	gap: 0;
}


.rating-item {
	width: 14px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	border-radius: 2px;
	box-sizing: border-box;
}

.grade-a { background-color: #4CAF50; }
.grade-b { background-color: #8BC34A; }
.grade-c { background-color: #FFEB3B; }
.grade-d { background-color: #FF9800; }
.grade-e { background-color: #F44336; }

/* 高亮边框样式 */
.highlight-b { border: 4rpx solid #000 !important; }
.highlight-c { border: 4rpx solid #000 !important; }

.rating-stars {
	display: flex;
	gap: 2px;
}

.star {
	font-size: 12px;
}

/* 菜单弹出层样式 */
/* 删除本页旧的菜单样式，使用 components/AccountMenu.vue 的统一样式 */
</style>
